<template>
<div class="role-management">
    <div class="ant-pro-table-search">
        <div class="wrapper" v-show="tableShow">
        <!-- 查询表单 -->
            <div class="ant-pro-table-search">
                <a-form v-bind="searchFormLayout">
                    <a-row :gutter="16">
                        <a-col :md="8" :sm="24">
                            <a-form-item label="字典名称">
                                <a-input v-model="queryParam.title" placeholder="字典名称" />
                            </a-form-item>
                        </a-col>
                        <a-col :md="16" :sm="24" class="table-page-search-wrapper">
                            <div class="table-page-search-submitButtons">
                                <a-button type="primary" @click="reloadTable">查询</a-button>
                                <a-button style="margin-left: 8px" @click="add">添加字典</a-button>
                            </div>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
            <!-- 表格区域 -->
            <a-card :bordered="false" :bodyStyle="{ padding: 0 }">
                <div class="ant-pro-table-wrapper">
                    <!--数据表格-->
                    <a-table
                        ref="table"
                        size="middle"
                        :rowKey="rowKey"
                        :columns="columns"
                        :dataSource="dataSource"
                        :pagination="pagination"
                        :loading="loading"
                        @change="handleTableChange"
                        :alert="{ show: true, clear: true }"
                    >
                    <!-- 操作 -->
                    <template slot="expandIcon">
                        <a-icon type="caret-down"/>
                    </template>
                    <template slot="action-slot" slot-scope="text, record">
                        <a @click="openDict(record)">查看字典值</a>
                        <a-divider type="vertical"/>
                        <a @click="EditDict(record)">编辑</a>
                        <a-divider type="vertical"/>
                        <a-popconfirm 
                            title="确认要删除吗？"
                            @confirm="() => handleDel(record,'rapid/dict/delete')">
                            <a href="javascript:">删除</a>
                        </a-popconfirm>
                    </template>
                    </a-table>
                </div>
            </a-card>
        </div>

        <!--添加字典-->
        <div v-if="visible">
            <a-modal
                :title="addFlag ? '新增' : '修改'"
                :visible="visible"
                @ok="handleSubmit"
                @cancel="handleClose"
                :confirmLoading="submitLoading"
                :maskClosable="false"
                :bodyStyle="{ padding: '12px 18px' }"
                :centered="true"
            >
                <a-form-model
                    @submit="handleSubmit"
                    :rules="rules"
                    :model="form"
                    ref="ruleForm"
                >
                    <a-form-model-item style="display: none">
                        <a-input v-model="form.id" />
                    </a-form-model-item>
                    <a-form-model-item label="字典名称" prop="title">
                        <a-input placeholder="请输入" v-model="form.title" />
                    </a-form-model-item>
                    <a-form-model-item label="字典类型" prop="type">
                        <a-input placeholder="请输入" v-model="form.type" />
                    </a-form-model-item>
                    <a-form-model-item label="备注">
                        <a-input placeholder="请输入" v-model="form.description" />
                    </a-form-model-item>
                    <a-form-model-item label="排序值">
                        <a-input placeholder="" v-model="form.sortOrder" />
                    </a-form-model-item>
                </a-form-model>
            </a-modal>
        </div>
    </div>

    <!--字典值页面-->
    <dictValue ref="dictValue"></dictValue>

</div>
</template>
<script>
import tableMixin from "./tableMixin";
import dictValue from "./dictValue";
export default {
    data() {
        return {
            // 表头
            columns: [
                {
                    title: "字典名称",
                    dataIndex: "title",
                    align: "center",
                },
                {
                    title: "字典类型",
                    dataIndex: "type",
                    align: "center",
                },
                {
                    title: "备注",
                    dataIndex: "description",
                    align: "center",
                },
                {
                    title: "创建时间",
                    dataIndex: "createTime",
                    align: "center",
                },
                {
                    title: "操作",
                    dataIndex: "action",
                    align: "center",
                    width: "260px",
                    scopedSlots: { customRender: "action-slot" },
                },
            ],
           
            addFlag:true,
            visible:false, 
            submitLoading:false,
            form:{
                id:"",
                title:"",
                type:"",
                description:""
            },
            rules:{
                title:[{required: true, message: '请输入字典名称', trigger: 'blur'}],
                type:[{required: true, message: '请输入字典类型', trigger: 'blur'}]
            },
        }
    },
    mixins: [tableMixin],
    components:{dictValue},
    created(){
        this.getDataUrl = "/rapid/dict/getPage";
        this.searchKey = "dict";
    },
    mounted(){
        console.log(22)
        this.reloadTable()
    },
    methods: {
        add(){
            this.visible = true;
            this.addFlag = true;
        },
        openDict(data){
            //打开详细列表
            this.$refs.dictValue.show(data);
        },
        EditDict(data){
            this.form = data;
            this.visible = true;
            this.addFlag = false;
        },
        handleClose(){
            this.visible = false;
            this.form = {};
            this.reloadTable();
        },
        handleSubmit(){
            this.$refs.ruleForm.validate((valid) =>{
                if(valid){
                    this.$http('/rapid/dict/saveOrUpdate',this.form).then(res =>{
                        if(res.code === 200){
                            this.$message.success("新增成功")
                        }
                    })
                }else{
                    this.$message.error("请填写必填项")
                    return false;
                }
            })
        },
        // 查询操作
        reloadTable() {
            this.pagination.current = 1;
            this.tableShow = true
            const data = {
                pageVo: {
                    pageNumber: this.pagination.current,
                    pageSize: this.pagination.pageSize,
                },
                dict: {
                    ...this.queryParam,
                },
            };
            this.loadData("/rapid/dict/getPage", data);
        },
    }
};
</script>
<style lang="less" scoped>
.role-management {
  .ant-pro-table-search {
    background-color: #fff;
    padding: 16px 24px 0;
    .table-page-search-wrapper {
      text-align: right;
      .table-page-search-submitButtons {
        padding-top: 3.5px;
        margin-bottom: 16px;
      }
    }
  }
  .ant-pro-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 64px;
  }
}
</style>